<h5 class="section-heading">
    Detail
    <info-popover mode="right-normal"><span ng-bind-html="$GF.popover('Definition of text mapping', 'TEXTS')"></span>
    </info-popover>
</h5>
<!-- WHAT/PATTERN -->
<div class="gf-form">
    <label class="gf-form-label width-10">
        What
        <info-popover mode="right-normal">
            <span ng-bind-html="$GF.popover('Enter shape Id or click on target button', 'TEXTS')">
            </span>
        </info-popover>
    </label>
    <input type="text" style="margin-right: 2px;" id="{{ text.uid }}" placeholder="id or regex of shape"
        class="gf-form-input width-8" ng-model="text.pattern"
        title="Enter an id, label,metadata attribute or regex to identify object"
        bs-typeahead="rule.getTextMapOptions().identByProp !== 'metadata' ? editor.getCellNamesTypeHead : editor.getCellNamesMD" data-min-length="0" data-items="100"
        ng-model-onblur data-placement="right" />
    <button class="btn btn-secondary btn-small" style="margin-left:2px; height: 32px;"
        ng-show="rule.getTextMapOptions().identByProp !== 'metadata'"
        title="Select an object in diagram/graph" ng-click="text.enableMapping(true)">
        <div Class="gf-icon-target" style="margin-bottom: 7px;margin-right: 2px;"></div>
    </button>
    <button class="btn btn-secondary btn-small" style="margin-left:5px; height: 32px;" title="Identify selected objects"
        ng-mousedown="editor.highlightXCells(text)"
        ng-mouseup="editor.unhighlightXCells(text)"
        ng-mouseleave="editor.unhighlightXCells(text)">
        <div Class="gf-icon-location" style="margin-bottom: 7px;margin-right: 2px;"></div>
    </button>
</div>
<div class="gf-form">
    <label class="gf-form-label width-10">When
        <info-popover mode="right-normal">
            <span ng-bind-html="$GF.popover('Select condition to display metric value on shape or text.', 'TEXTS')">
            </span>
        </info-popover>
    </label>
    <select class="gf-form-input width-8" ng-model="text.condition"
        ng-options="c.value as c.text for c in editor.textOn">
    </select>
</div>
<div class="gf-form">
    <label class="gf-form-label width-10" style="margin-right: 2px;">How
        <info-popover mode="right-normal">
            <span ng-bind-html="$GF.popover('Whitch part of text to replace', 'TEXTS','example_text_pattern')">
            </span>
        </info-popover>
    </label>
    <select class="gf-form-input width-8" style="margin-right: 2px;" ng-model="text.method"
        ng-options="c.value as c.text for c in editor.textReplace" ng-change="rule.change();">
    </select>
</div>
<div class="gf-form" ng-if="text.method == 'pattern' && text.condition != 'n'">
    <label class="gf-form-label width-10" style="margin-right: 2px;">With
        <info-popover mode="right-normal">
            <span
                ng-bind-html="$GF.popover('Enter pattern/regular expression (Only for substring method)', 'TEXTS','example_text_pattern')">
            </span>
        </info-popover>
    </label>
    <input
        type="text"
        class="gf-form-input width-8"
        ng-model="text.textToReplace"
        ng-model-onblur
        placeholder="Text or pattern to replace by metric value" />
</div>
